<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		{% load static %}
		<!--引入附加的register.css文件-->
		<link rel="stylesheet" type="text/css" href="{% static 'CSS/register.css' %}" />
		<!--引入layui的css和js文件-->
		<link rel="stylesheet" type="text/css" href="{% static 'layui-v2.6.8/layui/css/layui.css' %}" />
		<script src="{% static 'layui-v2.6.8/layui/layui.js' %}" type="text/javascript" charset="utf-8"></script>
		<!--引入附加的register.js-->
		<script src="{% static 'JS/register.js' %}" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--定义一个祖先div元素,方便设置居中样式-->
		<div id="parent">
			<form id="register" action="/washer/register" method="post" class="layui-form">
				{% csrf_token %}
				<div class="logo">
					<div>注册</div>
				</div>
				<!--输入用户,可以使用手机和邮箱来进行用户注册-->
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">用户</label>
						<div class="layui-input-inline" style="width: 300px;">
							<input type="text" name="userid" id="uid" required class="layui-input layui-form-danger"
								placeholder="手机/邮箱" />
						</div>
					</div>
				</div>
				<!-- 输入用户名 -->
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">用户名</label>
						<div class="layui-input-inline" style="width: 300px;">
							<input type="text" name="username" id="uname" required class="layui-input layui-form-danger"
								placeholder="用户名/昵称" />
						</div>
					</div>
				</div>
				<!--选择用户性别-->
				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-inline">
						<input type="radio" name="gender" value="男" title="男">
						<input type="radio" name="gender" value="女" title="女">
					</div>
				</div>
				<!--输入用户年龄-->
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">您多大</label>
						<div class="layui-input-inline" style="width: 300px;">
							<input type="number" name="age" id="age" required class="layui-input layui-form-danger"
								placeholder="请输入年龄" />
						</div>
					</div>
				</div>
				<!--设置密码-->
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">密码</label>
						<div class="layui-input-inline" style="width: 300px;">
							<input type="password" name="upwd" id="upwd1" required class="layui-input layui-form-danger"
								placeholder="字母/数字(6-16位)" />
						</div>
					</div>
				</div>
				<!--确认密码-->
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">重复密码</label>
						<div class="layui-input-inline" style="width: 300px;">
							<input type="password" name="upwd" id="upwd2" required onkeyup="equals();"
								class="layui-input layui-form-danger" placeholder="字母/数字(6-16位)" />
						</div>
					</div>
				</div>
				<!--点击注册提交注册表单-->
				<div class="layui-input-inline">
					<button id="submit" type="submit" class="layui-btn layui-btn-lg" layui-submit
						style="width: 200px;margin-left: 150px;">注册
					</button>
				</div>
				<!--占位空盒子-->
				<div class="layui-input-block"></div>
				<!--点击去登录返回登录界面-->
				<a href="/washer/login" style="color: #fff;">
					<button id="btn" type="button" class="layui-btn layui-btn-lg"
						style="width: 200px;margin-left: 150px;">去登录
					</button>
				</a>
			</form>
		</div>
		<!--加载layui.form模块-->
		<script type="text/javascript">
			layui.use("form", function() {
				var form = layui.form;
			});

			layui.use("layer", function() {
				var layer = layui.layer;
				layer.open({
					title: ['温馨提示', 'font-size:20px'],
					type: 0,
					content: '<h3>若两次密码输入不一致，则注册按钮无法点击！</h3>'
				});
			});
		</script>
	</body>
</html>
